# Casilla / Checkbox

### Código

```
<checkbox></checkbox>
```



### Tokens

**Color**

| Class                     | Property         | Color token   |
| :------------------------ | :--------------- | :------------ |
| `.bx--label`              | text color       | `$text-02`    |
| `.bx--checkbox-label`     | text color       | `$text-01`    |
| `.bx--checkbox`           | border           | `$icon-01`    |
| `.bx--checkbox:unchecked` | background-color | transparent   |
| `.bx--checkbox:checked`   | background-color | `$icon-01`    |
| `.bx--checkbox:checked`   | checkmark        | `$inverse-01` |

| State       | Property   | Color token    |
| :---------- | :--------- | :------------- |
| `:focus`    | border     | `$focus`       |
| `:disabled` | text color | `$disabled-02` |
| `:disabled` | border     | `$disabled-02` |

**Tipografía**

| Class                 | Type token       |
| :-------------------- | :--------------- |
| `.bx--label`          | `$label-01`      |
| `.bx--checkbox-label` | `$body-short-01` |

**Estructura**

| Class                                 | Property       | Spacing token |
| :------------------------------------ | :------------- | :------------ |
| `.bx--checkbox`                       | height & width | –             |
| `.bx--checkbox`                       | border         | –             |
| `.bx--checkbox:focus`                 | border         | –             |
| `.bx--label`                          | margin-bottom  | `$spacing-03` |
| `.bx--checkbox-label`                 | padding-left   | `$spacing-03` |
| `.bx--form-item.bx--checkbox-wrapper` | margin-bottom  | `$spacing-03` |